<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>angular</title>
	<style>
		.in{
			outline: red solid ;
		}
		.abc{
			width: 300px;
			height: 200px;
			border: 1px solid red;
		}
	</style>

</head>
<body>
	

	<div ng-app="myApp" ng-controller="myCtrl">

		<form action="">

			<label>姓名：<input type="text" class="in" ng-model="abc"></label> 
			<span>{{abc}}</span>



		</form>

		<div class="abc" ng-if="foo">
			
		</div>
		<button ng-click="nocl()"></button>
		
		<super></super>

	
	</div>


	<script src="../lib/angular.min.js" type="text/javascript"></script>
	<script>

		var app = angular.module('myApp',[]); 
		app.controller('myCtrl',function($scope,sli) {
			var str = '1234567890';
			$scope.abc = sli.one(str);
			$scope.nocl = function() {
				//$scope.foo = true;
			}

		});

		app.directive('super',function() {
			return {
				/*scope : {
					str ： "="
				},*/
				//restrict : "EA",
				template : "<div>我的第一个自定义指令{{str}}</div>"
			}
		});

		app.service('sli',function() {
			this.one = function(txt) {
				return txt.substr(0,3)
			}
		})




	</script>
</body>
</html>